<template lang="html">
	<div class="search" v-if="isSearch == false">
		<div class="container" >
			<div class="input" @click="ask()">
					<input type="search" id='id-input-ask'
					v-model='key'
					@click="showBg()"
					@blur="clear()"
					placeholder="提问"
					>
			</div>
			<div class="button">
				<!-- <div class="line">
				</div> -->
				<div class="">
					<img src="" alt="">
				</div>
				<!-- <div class="title" @click='search()'> -->
					<!-- 提问 -->
				<!-- </div> -->
			</div>
		</div>

		<div class="searchBg" @click="clear()" v-if='isSearch == true'>

		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			key: '',
		}
	},
	methods: {
		search() {
			this.log('enter')
			// 这里是点击 回车或图标后的搜索功能
			this.key = '搜索成功'
			$('#id-input-search').blur()
		},
		showBg() {
			this.show = true
		},
		clear() {
			$('#id-input-search').blur()
			this.show = false
			this.$store.commit('isSearchSave', false)
		},
		ask() {
			this.$router.push({
				path: '/ask'
			})
		}
	},
	watch: {
		isSearch() {
			if (this.isSearch == true) {
				// this.log('isSearch', this.isSearch)
				$('#id-input-search').focus()
			}
		}
	},
	computed: {
		isSearch() {
			return this.$store.state.isSearch
		}
	}
}
</script>

<style lang="scss" scoped>
	.search {
		margin-top:5px;
		height: 105px;
		background: #26a2ff;
		position: relative;
		.container {
			position: absolute;
			top: 20px;
			left: 30px;
			display: flex;
			width: 690px;
			background: #fff;
			height: 68px;
			.input {
				input {
					height: 68px;
					width: 620px;
					// background-image: url(@/components/common/images/search.png);
					// background-repeat: no-repeat;
					// background-size: 40px;
					// background-position: 30px 13px;
					outline: none;
					border: none;
					padding-left: 40px;
					line-height: 35px;
					font-size: 30px;
					padding-bottom: 3px;
				}
			}
			.button {
				display: flex;
				line-height: 68px;
				position: relative;
				.line {
					height: 30px;
					width: 2px;
					background: #999;
					position: relative;
					top: 18px;
					margin-right: 30px;
				}
				img {
					height: 30px;
					margin-right: 10px;
					position: relative;
					top: 7px;
				}
				.title {
					font-size: 30px;
					color: #666;
					line-height: 68px;
				}
			}

		}
		.searchBg {
			position: absolute;
			height: 100vh;
			width: 100vw;
			background: #ccc;
			// background: red;
			opacity: 0.4;
			top: 105px;
			z-index: 100;
		}
	}

</style>
